<template>
  <v-layout row wrap>
    <v-flex xs2>
      <v-btn flat large color="primary" to="/first">page1</v-btn>
    </v-flex>
    <v-flex xs2>
      <v-btn flat large color="primary" to="/table">导航2</v-btn>
    </v-flex>
    <v-flex xs2>
      <v-btn flat large color="primary">{{busMsg}}</v-btn>
    </v-flex>
    <v-flex xs2>
      <v-btn flat large color="primary" @click="changeName('already change')">导航4</v-btn>
    </v-flex>
    <v-flex xs2>
      <v-btn flat large color="primary">导航6</v-btn>
    </v-flex>
    <v-flex xs2>
      <v-menu bottom offset-y open-on-hover>
        <v-btn slot="activator" flat large color="primary">A Menu</v-btn>
        <v-list>
          <v-list-tile to="/hello">
            <v-list-tile-title>
             更多
            </v-list-tile-title>
          </v-list-tile>
          <v-list-tile>
            <v-list-tile-title>更多</v-list-tile-title>
          </v-list-tile>
          <v-list-tile>
            <v-list-tile-title>更多</v-list-tile-title>
          </v-list-tile>
        </v-list>
      </v-menu>
    </v-flex>
  </v-layout>
</template>

<script>
import bus from '@/bus'

export default {
  name: 'toolbar',
  data () {
    return {
      busMsg: '当前导航'
    }
  },
  // 接收信息组件
  // 1.引入bus
  // 2.在created时期定义接收函数 $on
  // 如需调用methods则注意this指向问题
  created () {
    var that = this
    bus.$on('bus-send', function (data) {
      // console.log(this)
      that.changeName(data)
    })
  },

  methods: {
    changeName: function (data) {
      this.busMsg = data
    }
  }
}
</script>
